<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/echarts.js"></script>
</head>

<body>
	<div id="sale" style="width:600px ;height:400px ;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById("sale"));
		var option = {
			title: {
				text: '产品销量',
				left:"center"
 			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}:{c}({d}%)' //所占比例 格式控制
			},
			legend: { //图例
				orient: "vertical", //horizontal 水平
				left: "left",
				data: ['鼠标', '键盘', 'u盘', '主板']
			},
			series: [{
				name: '所售商品',
				type: 'pie',
				radius:['50%','80%'],//第一个 代表内环半径比例
				data: [{
						value: 300,
						name: '鼠标'
					},
					{
						value: 400,
						name: '键盘'
					},
					{
						value: 200,
						name: 'u盘'
					},
					{
						value: 940,
						name: '主板'
					}
				]
			}]
		};
		
		myCharts.setOption(option);
	</script>
</body>

</html>